<template>

    <el-menu :default-active="activePath" class="el-menu-vertical-demo" >
       <template v-for="item,index in routes.children" >
        <el-menu-item :index="item.path" @click = 'change(item)' >
            <el-icon>
                <location />
            </el-icon>
            <span>{{item.name}}</span>
        </el-menu-item>
        </template>
       
    </el-menu>
</template>

<script setup>
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router';


const router = useRouter()
const route = useRoute()

let routes = ref([])
let activePath = ref('/about')
const change = (item) => {
    // activePath.value = item.path
    router.push(item.path)
}

onMounted(() => {
    routes.value = router.options.routes[2];
    activePath.value = route.path
})
</script>

<style lang="less" scoped>
.el-menu {
    height: 100%;
}
</style>